<template>
    <section>
        <a-button class="mr20" type="primary" @click="showglypop" 
            >新增</a-button
        >
        <template>
            <a-modal
                :visible="glyvisible"
                :footer="null"
                okText="确认"
                @cancel="cancelformgly"
                :maskClosable="false"
            >
                <a-form-model
                    ref="glyruleForm"
                    v-if="glyvisible"
                    layout="vertical"
                    :rules="glyrules"
                    :model="userOprInfo"
                >
                    <a-form-model-item label="账号" prop="userCode">
                        <a-input
                            v-model="userOprInfo.userCode"
                            :disabled="editglyflag"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="密码" prop="userPassword">
                        <a-input v-model="userOprInfo.userPassword" />
                    </a-form-model-item>
                    <a-form-model-item label="姓名" prop="userRealName">
                        <a-input v-model="userOprInfo.userRealName" />
                    </a-form-model-item>
                    <a-form-model-item label="电话" prop="userMobile">
                        <a-input v-model="userOprInfo.userMobile" />
                    </a-form-model-item>
                    <a-form-model-item label="邮箱" prop="userEmail">
                        <a-input v-model="userOprInfo.userEmail" />
                    </a-form-model-item>
                    <a-form-model-item label="权限范围" prop="roleCode">
                        <a-select v-model="userOprInfo.roleCode">
                            <a-select-option
                                v-for="(item, index) in authGroups"
                                :key="index"
                                :value="item.roleCode"
                            >
                                {{ item.roleName }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button
                            type="primary"
                            class="fr"
                            @click="handleDptUserSavegly"
                            >保存</a-button
                        >
                        <a-button class="fr mr20" @click="cancelformgly"
                            >取消</a-button
                        >
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </template>
    </section>
</template>

<script>
import { mapState} from "vuex";
export default {
    props: {
        glyvisible: {
            type: Boolean,
            default: false,
        },
        editglyflag: {
            type: Boolean,
            default: false,
        },

        userOprInfo: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },

    data() {
        return {
            //管理员管理
            authGroups: [],

            glyrules: {
                //管理员管理
                userCode: {
                    required: true,
                    message: "账号不能为空",
                },
                userPassword: {
                    required: true,
                    message: "密码不能为空",
                },
                userRealName: {
                    required: true,
                    message: "姓名不能为空",
                },
                userMobile: {
                    required: true,
                    message: "电话不能为空",
                },
                userEmail: {
                    required: true,
                    message: "邮箱不能为空",
                },
                roleCode: {
                    required: true,
                    message: "权限范围不能为空",
                },
            },
        };
    },

    mounted() {
        console.log(this.userOprInfo)
        //管理员管理
        this.queryOwerOperatorGrop();
    },
    computed:{
        ...mapState(['opt'])
    },
    methods: {
        showglypop() {
            this.$emit("showglypop");
            // this.glyvisible = true
        },
        // 判断是否有当前权限
        queryOwerOperatorGrop() {
            this.$post("/exter/manage/queryOwerOperatorGrop", {}).then(
                (result) => {
                    this.authGroups = result.buss || [];
                    if (this.authGroups.length > 0) {
                        this.lookItemGroupAuth(this.authGroups[0]);
                        this.editcode = this.authGroups[0].roleCode;
                    }
                }
            );
        },
        lookItemGroupAuth(item) {
            this.curSelectAuthGroup = item.roleCode;
            this.catOperatorGrop({
                paramVar: item.roleCode,
            });
            this.editcode = item.roleCode;
            console.log(this.editcode);
        },
        catOperatorGrop(obj) {
            this.$post("/exter/manage/catOperatorGrop", obj).then((result) => {
                console.log(result);
                this.authListGroupItemselect = result.buss.operCodeList;
            });
        },

        handleDptUserSavegly() {
            // 更新还是新增1 修改0
            this.$refs["glyruleForm"].validate((valid) => {
                if (valid) {
                    if (this.editglyflag) {
                        this.userOprInfo.addFlag = 0;
                    } else {
                        this.userOprInfo.addFlag = 1;
                    }

                    this.$post(
                        "/exter/manage/addUserOprInfo",
                        this.userOprInfo
                    ).then((result) => {
                        console.log(result);
                        this.$emit("handleDptUserSavegly");
                    });
                }
            });
        },
        cancelformgly() {
            this.$emit("cancelformgly");
        },
    },
};
</script>

<style scoped lang='less'>
</style>
